window.addEventListener('load',function() {
    var tab = document.querySelectorAll(".tab");
    var tabContent = document.querySelectorAll(".tab-content");
    var tabTopItems = document.querySelectorAll(".tab-top-item");

    for(var i = 0;i<tab.length;i++) {
        tab[i].onclick = function() {
            tabChange(this);
        }
    }

    for(var i = 0;i<tabTopItems.length;i++) {
        tabTopItems[i].onclick = function() {
            tabTopChange(this);
        }
    }

    // 产品双标签变换
    function tabChange(obj) {
        for (var i = 0;i<tab.length;i++) {
            if(tab[i]==obj) {
                tab[i].className = "tab current";
                tabContent[i].className = "tab-content show";
            }else {
                tab[i].className = "tab";
                tabContent[i].className = "tab-content";
            }
        }
    }
    // 产品三标签变换
    function tabTopChange(obj) {
        for (var i = 0;i<tabTopItems.length;i++) {
            if(tabTopItems[i]==obj) {
                tabTopItems[i].className = "tab-top-item is-active";
            }else {
                tabTopItems[i].className = "tab-top-item";
        }
        }   
    }
    // 标签栏吸附效果
    var tabtop = document.querySelector('.tab-top');
    var tabPassage = document.querySelector('.tab-passage-wrap');
    var tabLike = document.querySelector('.tab-like-wrap');
    var tabComment = document.querySelector('.tab-comment-wrap');
    var tabtopTop = tabtop.offsetTop; 
    var tabPassageTop =tabPassage.offsetTop;
    var tabLikeTop = tabLike.offsetTop;
    var tabCommentTop = tabComment.offsetTop;

    document.addEventListener('scroll',function() {
        if(window.pageYOffset>=tabtopTop-100) {
            tabtop.style.position = 'fixed';
            tabtop.style.top = '50px';
            tabtop.style.background = 'snow';
        }else {
            tabtop.style.position = 'relative';
            tabtop.style.top = '0';
            tabtop.style.background = '';
        }

        if(window.pageYOffset<=tabPassageTop){
            tabTopChange(tabTopItems[0]);
        }else if(window.pageYOffset>tabPassageTop&&window.pageYOffset<=tabLikeTop) {
            tabTopChange(tabTopItems[1]);
        }else if(window.pageYOffset>tabLikeTop) {
            tabTopChange(tabTopItems[2]);
        }
    })
})